<template>
  <div class="bgc">
    <div class="hearder"> 
     
<NavIndex></NavIndex>
      
        
      
    </div>
    <div class="body">
      <div class="left">
        <div class="left-top">
          <div class="stats-container">
            <div class="stats-box">
              <div class="stats-title">今日时长</div>
              <div class="stats-value">{{ formattedStats.todayDuration }}</div>
            </div>
            <div class="stats-box">
              <div class="stats-title">本周时长</div>
              <div class="stats-value">{{ formattedStats.weekDuration }}</div>
            </div>
            <div class="stats-box">
              <div class="stats-title">本周排名</div>
              <div class="stats-value">{{ formattedStats.weekRanking }}</div>
            </div>
            <div class="stats-box">
              <div class="stats-title">总时长</div>
              <div class="stats-value">{{ formattedStats.totalDuration }}</div>
            </div>
          </div>
        </div>
        <div class="left-bottom">
          <div ref="chartRef" class="chart-container"></div>
        </div>
      </div>
      <div class="auto">
        <div class="clock-container">
          <div class="clock">{{ currentTime }}</div>
          <div class="progress-container">
            <div class="progress-bar" :style="{ width: remainingTimePercentage + '%' }">
              <span class="progress-text">{{ remainingTimePercentage }}%</span>
            </div>
          </div>
          <div class="remaining-time">今日剩余时间: {{ remainingTimeFormatted }}</div>
        </div>
        
        <div class="sign-button-container">
          <button 
            class="sign-button" 
            :class="{ 'signed': isSigned }" 
            @click="toggleSignStatus"
          >
            {{ isSigned ? '结束签到' : '开始签到' }}
          </button>

        </div>
        <div class='clock-current-duration'>
          <div class="duration-text">
            本次签到时长
            <span>{{ formattedCurrentDuration }}</span>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="ranking-container">
          <div class="ranking-card weekly">
            <h3>本周排行榜</h3>
            <div class="ranking-item longest">
              <span class="rank-label">最长时长</span>
              <span class="rank-value">{{ rankingData.weekly.longest.duration }}h</span>
              <span class="rank-name">{{ rankingData.weekly.longest.name }}</span>
            </div>
            <div class="ranking-item my-rank">
              <span class="rank-label">我的时长</span>
              <span class="rank-value">{{ rankingData.weekly.myRank.duration }}h</span>
              <span class="rank-name">当前排名: {{ rankingData.weekly.myRank.rank }}</span>
            </div>
            <div class="ranking-item shortest">
              <span class="rank-label">最短时长</span>
              <span class="rank-value">{{ rankingData.weekly.shortest.duration }}h</span>
              <span class="rank-name">{{ rankingData.weekly.shortest.name }}</span>
            </div>
          </div>
          <div class="ranking-card daily">
            <h3>今日排行榜</h3>
            <div class="ranking-item longest">
              <span class="rank-label">最长时长</span>
              <span class="rank-value">{{ rankingData.daily.longest.duration }}h</span>
              <span class="rank-name">{{ rankingData.daily.longest.name }}</span>
            </div>
            <div class="ranking-item my-rank">
              <span class="rank-label">我的时长</span>
              <span class="rank-value">{{ rankingData.daily.myRank.duration }}h</span>
              <span class="rank-name">当前排名: {{ rankingData.daily.myRank.rank }}</span>
            </div>
            <div class="ranking-item shortest">
              <span class="rank-label">最短时长</span>
              <span class="rank-value">{{ rankingData.daily.shortest.duration }}h</span>
              <span class="rank-name">{{ rankingData.daily.shortest.name }}</span>
            </div>
          </div>
        </div>
        <div class="schedule-container">
          <div class="schedule-header">
            <div class="header-cell">课程表</div>
            <div class="header-cell">星期一</div>
            <div class="header-cell">星期二</div>
            <div class="header-cell">星期三</div>
            <div class="header-cell">星期四</div>
            <div class="header-cell">星期五</div>
            <div class="header-cell">星期六</div>
            <div class="header-cell">星期日</div>
          </div>
          <div class="schedule-body">
            <div v-for="row in 4" :key="row" class="schedule-row">
              <div class="period-cell">第{{row}}节</div>
              <div v-for="col in 7" :key="col" 
                   class="schedule-cell"
                   @click="openAddCourseDialog(row, col)">
                <div v-if="schedule[`${row}-${col}`]" class="course-card">
                  {{ schedule[`${row}-${col}`] }}
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 添加课程对话框 -->
        <div v-if="showDialog" class="dialog-overlay" @click="closeDialog">
          <div class="dialog-content" @click.stop>
            <h3>添加课程</h3>
            <input v-model="newCourse" placeholder="请输入课程名称" class="course-input">
            <div class="dialog-buttons">
              <button @click="addCourse" class="confirm-btn">确认</button>
              <button @click="closeDialog" class="cancel-btn">取消</button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 结束签到弹窗 -->
      <el-dialog
        v-model="showEndSignDialog"
        title="结束签到"
        width="30%"
        :show-close="true"
        :close-on-click-modal="false"
        class="custom-dialog"
      >
        <el-input
          v-model="studyContent"
          type="textarea"
          :rows="4"
          placeholder="请输入学习内容"
        />
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="closeEndSignDialog">取消</el-button>
            <el-button type="primary" @click="confirmEndSign">确认</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import NavIndex from "@/components/topNav/topNavIndex.vue";
import { ref, onMounted, onUnmounted, reactive, onBeforeUnmount, computed } from 'vue';
import * as echarts from 'echarts';
import { ElMessage, ElDialog } from 'element-plus';

const currentTime = ref('');
const remainingTimePercentage = ref(0);
const remainingTimeFormatted = ref('');
let timer = null;

// User stats data
const userStats = reactive({
  todayDuration: 0, // 今日时长 (小时)
  weekDuration: 0, // 本周时长 (小时)
  weekRanking: 0, // 本周排名
  totalDuration: 0 // 总时长 (小时)
});

// 排行榜数据
const rankingData = reactive({
  weekly: {
    longest: { duration: 0, name: '' },
    shortest: { duration: 0, name: '' },
    myRank: { duration: 0, rank: 0 }
  },
  daily: {
    longest: { duration: 0, name: '' },
    shortest: { duration: 0, name: '' },
    myRank: { duration: 0, rank: 0 }
  }
});

// 签到状态管理
const isSigned = ref(false);
const showEndSignDialog = ref(false);
const studyContent = ref('');
const startTime = ref(null); // 签到开始时间
const currentDuration = ref(0); // 本次签到时长（秒）
let timerInterval = null; // 计时器 ID

// 本地存储键名
const STORAGE_KEYS = {
  USER_STATS: 'userStats',
  RANKING_DATA: 'rankingData',
  WEEKLY_DATA: 'weeklyData',
  CURRENT_SIGN_IN: 'currentSignIn',
  SCHEDULE: 'schedule'
};

// 从本地存储加载数据
const loadDataFromStorage = () => {
  try {
    // 加载用户统计数据
    const savedUserStats = localStorage.getItem(STORAGE_KEYS.USER_STATS);
    if (savedUserStats) {
      const parsed = JSON.parse(savedUserStats);
      Object.assign(userStats, parsed);
    }

    // 加载排行榜数据
    const savedRankingData = localStorage.getItem(STORAGE_KEYS.RANKING_DATA);
    if (savedRankingData) {
      const parsed = JSON.parse(savedRankingData);
      Object.assign(rankingData, parsed);
    }

    // 加载周数据
    const savedWeeklyData = localStorage.getItem(STORAGE_KEYS.WEEKLY_DATA);
    if (savedWeeklyData) {
      const parsed = JSON.parse(savedWeeklyData);
      weeklyData.forEach((item, index) => {
        if (parsed[index]) {
          item.duration = parsed[index].duration;
        }
      });
    }

    // 加载课程表
    const savedSchedule = localStorage.getItem(STORAGE_KEYS.SCHEDULE);
    if (savedSchedule) {
      const parsed = JSON.parse(savedSchedule);
      Object.assign(schedule, parsed);
    }

    // 检查是否有未完成的签到
    const savedSignIn = localStorage.getItem(STORAGE_KEYS.CURRENT_SIGN_IN);
    if (savedSignIn) {
      const signInData = JSON.parse(savedSignIn);
      const now = Date.now();
      const timeDiff = now - signInData.startTime;
      
      // 如果签到时间超过24小时，清除签到状态
      if (timeDiff < 24 * 60 * 60 * 1000) {
        isSigned.value = true;
        startTime.value = signInData.startTime;
        startTimer();
      } else {
        localStorage.removeItem(STORAGE_KEYS.CURRENT_SIGN_IN);
      }
    }
  } catch (error) {
    console.error('加载本地数据失败:', error);
    setMockData();
  }
};

// 保存数据到本地存储
const saveDataToStorage = () => {
  try {
    localStorage.setItem(STORAGE_KEYS.USER_STATS, JSON.stringify(userStats));
    localStorage.setItem(STORAGE_KEYS.RANKING_DATA, JSON.stringify(rankingData));
    localStorage.setItem(STORAGE_KEYS.WEEKLY_DATA, JSON.stringify(weeklyData));
    localStorage.setItem(STORAGE_KEYS.SCHEDULE, JSON.stringify(schedule));
  } catch (error) {
    console.error('保存数据失败:', error);
  }
};

// 启动计时器
function startTimer() {
  startTime.value = Date.now(); // 记录开始时间
  console.log('开始签到:', new Date()); // 输出开始签到时间
  
  // 保存签到状态到本地存储
  localStorage.setItem(STORAGE_KEYS.CURRENT_SIGN_IN, JSON.stringify({
    startTime: startTime.value
  }));
  
  timerInterval = setInterval(() => {
    currentDuration.value = Math.floor((Date.now() - startTime.value) / 1000); // 计算签到时长
  }, 1000);
}

// 停止计时器
function stopTimer() {
  clearInterval(timerInterval); // 清除计时器
  timerInterval = null;
  console.log('本次签到时长:', formatDuration(currentDuration.value)); // 输出本次签到时长
  
  // 清除本地存储的签到状态
  localStorage.removeItem(STORAGE_KEYS.CURRENT_SIGN_IN);
}

// 格式化时长（将秒转换为 HH:MM:SS）
function formatDuration(seconds) {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = seconds % 60;
  return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
}

// 将秒转换为小时，保留一位小数
function secondsToHours(seconds) {
  return (seconds / 3600).toFixed(1);
}

// 设置模拟数据以便于演示
const setMockData = () => {
  // 个人统计数据
  userStats.todayDuration = 2.5;
  userStats.weekDuration = 21;
  userStats.weekRanking = 3;
  userStats.totalDuration = 126;
  
  // 排行榜数据
  rankingData.weekly.longest = { duration: 32, name: '张三' };
  rankingData.weekly.shortest = { duration: 5, name: '李四' };
  rankingData.weekly.myRank = {
    duration: userStats.weekDuration,
    rank: userStats.weekRanking
  };
  
  rankingData.daily.longest = { duration: 6, name: '王五' };
  rankingData.daily.shortest = { duration: 0.5, name: '赵六' };
  rankingData.daily.myRank = {
    duration: userStats.todayDuration,
    rank: 5
  };
  
  // 图表数据
  weeklyData[0].duration = 2;
  weeklyData[1].duration = 3;
  weeklyData[2].duration = 4;
  weeklyData[3].duration = 2.5;
  weeklyData[4].duration = 5.5;
  weeklyData[5].duration = 1;
  weeklyData[6].duration = 3;
  
  updateChart();
  saveDataToStorage();
};

// 切换签到状态
const toggleSignStatus = () => {
  if (!isSigned.value) {
    ElMessage.success('签到成功');
    isSigned.value = true;
    startTimer(); // 开始计时
  } else {
    showEndSignDialog.value = true;
  }
};

// 确认结束签到
const confirmEndSign = () => {
  if (!studyContent.value.trim()) {
    ElMessage.warning('请输入学习内容');
    return;
  }
  
  stopTimer(); // 停止计时器
  
  // 计算本次签到的小时数
  const durationHours = Number(secondsToHours(currentDuration.value));
  
  ElMessage.success('签退成功');
  updateStatsAfterSignOut(durationHours);
};

// 签退后更新统计数据
const updateStatsAfterSignOut = (durationHours) => {
  isSigned.value = false;
  
  // 更新统计数据
  userStats.todayDuration += durationHours;
  userStats.weekDuration += durationHours;
  userStats.totalDuration += durationHours;
  
  // 更新排行榜数据
  rankingData.daily.myRank.duration += durationHours;
  rankingData.weekly.myRank.duration += durationHours;
  
  // 更新当日的图表数据
  const today = new Date().getDay(); // 0是周日，1-6是周一到周六
  const dayIndex = today === 0 ? 6 : today - 1; // 转换为0-6，对应周一到周日
  weeklyData[dayIndex].duration += durationHours;
  
  // 保存数据到本地存储
  saveDataToStorage();
  
  // 重新渲染图表
  updateChart();
  
  // 重置当前签到时长
  currentDuration.value = 0;
  
  // 关闭对话框
  closeEndSignDialog();
};

// 关闭结束签到弹窗
const closeEndSignDialog = () => {
  showEndSignDialog.value = false;
  studyContent.value = '';
};

// 更新时钟和剩余时间
const updateTime = () => {
  const now = new Date();
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');
  currentTime.value = `${hours}:${minutes}:${seconds}`;

  // 计算今日剩余时间
  const totalSecondsInDay = 24 * 60 * 60;
  const currentSeconds = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();
  const remainingSeconds = totalSecondsInDay - currentSeconds;
  
  // 更新进度条百分比
  remainingTimePercentage.value = Math.round((remainingSeconds / totalSecondsInDay) * 100);
  
  // 格式化剩余时间
  const remainingHours = Math.floor(remainingSeconds / 3600);
  const remainingMinutes = Math.floor((remainingSeconds % 3600) / 60);
  const remainingSecondsDisplay = remainingSeconds % 60;
  remainingTimeFormatted.value = `${String(remainingHours).padStart(2, '0')}:${String(remainingMinutes).padStart(2, '0')}:${String(remainingSecondsDisplay).padStart(2, '0')}`;
};

// 获取用户数据和统计信息
const formattedStats = computed(() => {
  return {
    todayDuration: `${userStats.todayDuration}h`,
    weekDuration: `${userStats.weekDuration}h`,
    weekRanking: userStats.weekRanking,
    totalDuration: `${userStats.totalDuration}h`
  };
});

// 本次签到时长的格式化显示
const formattedCurrentDuration = computed(() => {
  return formatDuration(currentDuration.value);
});

onMounted(() => {
  updateTime();
  timer = setInterval(updateTime, 1000);
  loadDataFromStorage(); // 从本地存储加载数据
  initChart();
  window.addEventListener('resize', () => {
    myChart && myChart.resize();
  });
});

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});

// 组件卸载前清除计时器
onBeforeUnmount(() => {
  if (timerInterval) {
    clearInterval(timerInterval);
  }
});

const chartRef = ref(null);
let myChart = null;

// 一周签到数据
const weeklyData = [
  { date: '周一', duration: 0 },
  { date: '周二', duration: 0 },
  { date: '周三', duration: 0 },
  { date: '周四', duration: 0 },
  { date: '周五', duration: 0 },
  { date: '周六', duration: 0 },
  { date: '周日', duration: 0 }
];

// 课程表数据
const schedule = reactive({});
const showDialog = ref(false);
const newCourse = ref('');
const currentCell = ref({ row: 0, col: 0 });

const openAddCourseDialog = (row, col) => {
  currentCell.value = { row, col };
  showDialog.value = true;
};

const closeDialog = () => {
  showDialog.value = false;
  newCourse.value = '';
};

const addCourse = () => {
  if (newCourse.value.trim()) {
    const key = `${currentCell.value.row}-${currentCell.value.col}`;
    schedule[key] = newCourse.value;
    saveDataToStorage(); // 保存课程表数据
    closeDialog();
  }
};

// 更新图表
const updateChart = () => {
  if (myChart) {
    myChart.setOption({
      series: [{
        data: weeklyData.map(item => item.duration)
      }]
    });
  }
};

const initChart = () => {
  if (chartRef.value) {
    myChart = echarts.init(chartRef.value);
    const option = {
      title: {
        text: '本周签到时长统计',
        textStyle: {
          color: '#fff',
          fontSize: 16,
          fontWeight: 'normal'
        }
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(255, 255, 255, 0.1)',
        borderColor: 'rgba(255, 255, 255, 0.2)',
        textStyle: {
          color: '#fff'
        },
        axisPointer: {
          type: 'line',
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
          }
        }
      },
      grid: {
        top: '19%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: weeklyData.map(item => item.date),
        axisLabel: {
          color: 'rgba(255, 255, 255, 0.7)',
          fontSize: 12
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)'
          }
        }
      },
      yAxis: {
        type: 'value',
        name: '时长(小时)',
        nameTextStyle: {
          color: 'rgba(255, 255, 255, 0.7)',
          fontSize: 12,
          padding: [0, 0, 0, 30]
        },
        axisLabel: {
          color: 'rgba(255, 255, 255, 0.7)',
          fontSize: 12
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)'
          }
        }
      },
      series: [{
        name: '签到时长',
        data: weeklyData.map(item => item.duration),
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          width: 3,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#409EFF'
          }, {
            offset: 1,
            color: '#67C23A'
          }])
        },
        itemStyle: {
          color: '#409EFF',
          borderWidth: 2,
          borderColor: '#fff'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(64, 158, 255, 0.35)'
          }, {
            offset: 1,
            color: 'rgba(103, 194, 58, 0.05)'
          }])
        },
        emphasis: {
          scale: true,
          focus: 'series'
        },
        animation: true,
        animationDuration: 1000,
        animationEasing: 'cubicOut'
      }]
    };
    myChart.setOption(option);
  }
};
</script>

<style scoped>
.bgc {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  background: linear-gradient(to right, rgb(10, 2, 13), rgb(51, 45, 53));
  min-height: 100vh;

  background-size: cover;
}

.bgc .hearder {
  flex: 1;
  height: 70px;
  /* z-index: 100; */
  /* background: rgba(0, 0, 0, 0.5); */
}

.bgc .body {
  /* flex: 1; */
  height: calc(100vh - 70px);
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.bgc .body .left {
  flex: 3;
  margin: 0 20px;
  /* background-color: rgba(19, 18, 18, 0.3); */
}
.bgc .body .auto {
  flex: 2;
  margin: 0 20px;
  /* background-color: rgba(221, 47, 47, 0.3) ; */
}
.bgc .body .right {
  flex: 3;
  margin: 0 20px;
  /* background-color: rgba(16, 228, 104, 0.3); */
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ranking-container {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.ranking-card {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

.ranking-card h3 {
  text-align: center;
  margin-bottom: 15px;
  font-size: 18px;
  color: #fff;
}

.ranking-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  margin: 8px 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.ranking-item.longest {
  background: rgba(103, 194, 58, 0.2);
}

.ranking-item.shortest {
  background: rgba(245, 108, 108, 0.2);
}

.ranking-item.my-rank {
  background: rgba(64, 158, 255, 0.2);
}

.rank-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.rank-value {
  font-size: 18px;
  font-weight: bold;
}

.rank-name {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}
.bgc .body .schedule-container {
  /* margin-top:20px; */
  height: 50%;
  min-height: 300px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.schedule-header {
  display: grid;
  grid-template-columns: 80px repeat(7, 1fr);
  background: rgba(255, 255, 255, 0.15);
  min-height: 40px;
}

.header-cell {
  padding: 12px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.schedule-body {
  color: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.schedule-row {
  display: grid;
  grid-template-columns: 80px repeat(7, 1fr);
  flex: 1;
}

.period-cell {
  padding: 12px;
  text-align: center;
  background: rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.schedule-cell {
  padding: 0.5vh;
  min-height: 8vh;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.schedule-cell:hover {
  background: rgba(255, 255, 255, 0.1);
}

.course-card {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  border-radius: 8px;
  padding: 8px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog-content {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 25px;
  width: 400px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  transition: transform 0.3s ease;
}

.dialog-content textarea {
  width: 100%;
  padding: 12px;
  margin: 15px 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  color: #fff;
  outline: none;
  font-size: 14px;
  resize: vertical;
  min-height: 120px;
  transition: all 0.3s ease;
}

.dialog-content textarea:focus {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.dialog-content textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.dialog-content h3 {
  margin: 0 0 20px 0;
  text-align: center;
}

.course-input {
  width: 100%;
  padding: 8px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #fff;
  outline: none;
}

.course-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.dialog-buttons {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.dialog-buttons button {
  flex: 1;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
  backdrop-filter: blur(5px);
}

.confirm-btn {
  background: linear-gradient(135deg, rgba(103, 194, 58, 0.6), rgba(64, 158, 255, 0.6));
  color: #fff;
  box-shadow: 0 4px 15px rgba(103, 194, 58, 0.2);
}

.confirm-btn:hover {
  background: linear-gradient(135deg, rgba(103, 194, 58, 0.8), rgba(64, 158, 255, 0.8));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(103, 194, 58, 0.3);
}

.cancel-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}

.cancel-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15);
}
.left-top {
  /* height: 50%; */
  padding: 20px;
  color: #fff;
}

.stats-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.stats-box {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 15px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.stats-title {
  font-size: 14px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.8);
}

.stats-value {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

.left-bottom {
  height: 50%;
  padding: 20px;
  margin-top: 60px;
  /* padding-bottom: 40px; */
}

.chart-container {
  width: 100%;
  height: 100%;
  min-height: 300px;
}

.clock-container {
  padding: 20px;
  margin-bottom: 20px;
}

.clock {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 20px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 48px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  margin-bottom: 20px;
}

.progress-container {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  height: 20px;
  margin: 10px 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #67c23a, #409eff);
  transition: width 0.3s ease;
}

.progress-text {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.remaining-time {
  color: #fff;
  font-size: 14px;
  margin-top: 10px;
  text-align: center;
}
.clock-current-duration {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 20px;
  margin: 20px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}

.duration-text {
  font-size: 16px;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 10px;
}

.duration-text span {
  display: block;
  font-size: 32px;
  font-weight: bold;
  color: #fff;
  margin-top: 10px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.sign-button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  margin-top: auto;
  margin-bottom: 40px;
  position: relative;
  padding: 30px;
}

.sign-button {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(5px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.sign-button:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.sign-button:active {
  transform: scale(0.95);
}

.sign-button.signed {
  background: rgba(245, 108, 108, 0.3);
  border-color: rgba(245, 108, 108, 0.5);
}



/* 签到成功提示框 */
.success-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.9);
  padding: 20px 40px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}


</style>
